<template>
  <el-container class="home_container">
    <!-- 平台看板头部 -->
    <el-header height="80px">
      <div class="title">
        <span>智慧云课堂</span>
      </div>
      <div class="right_box">
        <div class="help">
          <i class="el-icon-warning-outline"></i>
          <span>帮助</span>
        </div>
        <div class="personal">
          <img src="@/assets/images/personal.jpg" alt />
          <span>HolyCode</span>
        </div>
      </div>
    </el-header>
    <el-container>
      <el-aside width="250px">
        <el-menu
          :default-active="selectedIndex"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#1b7bef"
          text-color="#a7c7ed"
          active-text-color="#e7eaec"
          @select="selectMenu"
          router
        >
          <el-menu-item
            :class=" item.id==selectedIndex?'actived':'' "
            :index="item.id"
            v-for="item in menulist"
            :key="item.id"
          >
            <img :src="menuImgs[item.id]" class="menu-img" alt />
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      menulist: [
        { id: "/board", name: "平台看板" },
        { id: "/buy", name: "课程购买量" },
        { id: "/hot", name: "热门课程" },
        { id: "/online", name: "在线听课人数" },
        { id: "/newuser", name: "新增用户" },
        { id: "/lively", name: "活跃用户统计" }
      ],
      menuImgs: {
        "/board": "/image/pingtai@2x.png",
        "/buy": "/image/xiaoliangyuce@2x.png",
        "/hot": "/image/remen-2@2x.png",
        "/online": "/image/mianfeishiting@2x.png",
        "/newuser": "/image/xinzengyonghu@2x.png",
        "/lively": "/image/huoyue2@2x.png"
      },
      selectedIndex: "/board"
    };
  },
  mounted() {
    this.selectedIndex = "/" + this.$route.path.split("/")[1];
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    selectMenu(index) {
      this.selectedIndex = index;
    }
  },
  watch: {
    "$route.path": function(value) {
      this.selectedIndex = "/" + value.split("/")[1];
    }
  }
};
</script>

<style lang="less" scoped>
.home_container {
  height: 100%;
  .el-header {
    background-color: #1b7bef;
    display: flex;
    justify-content: space-between;
    padding-left: 0;
    align-items: center;
    color: #fff;
    font-size: 24px;
    position: relative;
    z-index: 9;
    box-shadow: 6px 3px 10px 0px rgba(0, 0, 0, 0.3);
    > .title {
      padding-left: 65px;
    }
    > .right_box {
      display: flex;
      align-items: center;
      span {
        margin-left: 10px;
      }
      .help {
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: 400;
        color: rgba(205, 205, 205, 1);
        line-height: 20px;
        i {
          font-size: 20px;
        }
      }
      .personal {
        margin-left: 30px;
        display: flex;
        align-items: center;
        img {
          width: 36px;
          border-radius: 50%;
        }
        span {
          color: rgba(242, 242, 242, 1);
          font-size: 18px;
        }
      }
    }
  }
  .menu-img {
    width: 16px;
    margin-right: 10px;
  }
  .el-aside {
    background-color: #1b7bef;
    .el-menu {
      border-right: none;
    }
    .el-menu-item {
      border-bottom: 1px solid #74a4de;
    }
    .actived {
      background-color: #1164c9 !important;
    }
    .actived::after {
      content: url(/image/right.png);
      margin-left: 20px;
    }
  }
  .el-main {
    background-color: #f2f2f2;
  }
}
</style>